<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="main">
                    <div class="outcontainer_right">
                        <div class="content">
                            <el-row :gutter="40" style="height: 40px;">
                                <el-col :span="16" style="height: 40px;">
                                    <label style="font-weight: normal;font-size:14px">导出类型:</label>
                                    <el-select v-model="hostType"  placeholder="请选择" size="small" style="width:150px;margin-top:12px;margin-left: 5px;margin-right: 5px;">
                                        <el-option label="服务器" value="0"></el-option>
                                        <el-option label="网络设备" value="1"></el-option>
                                    </el-select>

                                    <el-button type="primary" size="small" style="margin-left:5px" @click="exportClick()">点击导出</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-main>
                <vFootSpace />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'PerformanceExcel',
        data() {
            return {
                hostType: "0",
                name: ''
            }
        },
        methods:{
            exportClick() {
                this.$confirm('此操作将导出该条件下的所有数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method: "post",
                        url: '/report/export_inspection_excel.action',
                        data: {
                            status: "可用",
                            hostType: this.hostType,
                        },
                        crossOrigin: true,
                        crossDomain: true,
                        responseType: 'blob',
                    }).then((response) => {
                        const link = document.createElement('a')
                        let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob)
                        let fileName = "巡检报告"
                        link.download = fileName
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }).catch((error) => {
                        console.log(error);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消导出'
                    });
                });
            }
        }
    }
</script>
<style scoped>
    .main{
        height: 88vh;
        width: 100%;
        margin-top: 60px;
        padding:10px;
    }
    .outcontainer_right{
        height: 100%;
        overflow-x:hidden
    }
    .content{
        margin-top: 0;
        width: 100%;
        height: 97%;
        overflow-x:hidden
    }
    .itemInfo-middle-type div{
        display: inline;
        padding-left: 5px;
        padding-right: 5px;
        height: 30px;
        line-height: 50px;
        color: #d9d9d9;
        border-top: 1px solid #d9d9d9;
        border-left: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
</style>
